<!DOCTYPE html>
<html>

<head>
	<title>Li云音乐2.0</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_586765_obv418tvtuyxpqfr.css" />
	<link rel="stylesheet" type="text/css" href="" id='theme' />
	<link rel="icon" type="image/x-icon" href="../favicon.ico" />
</head>

<body>
	<div id="container">
		<div class="background">
			<div id="header">
				<div class="nav">
					<div class="logo"></div>
					<div class="header-menu">
						<div class="search-bar">
							<input class="search" placeholder="搜索音乐，MV..." />
						</div>
						<div class="icon-menu">
							<div class="user">
								<div class="user-avatar sm">
									<i class="lg iconfont icon-user"></i>
								</div>
								<span class="user-nickname">欢迎！</span>
							</div>
							<i class="lg iconfont icon-skin"></i>
							<i class="lg iconfont icon-setting"></i>
							<i class="lg iconfont icon-full"></i>
						</div>
					</div>
				</div>
			</div>
			<div id="main">
				<div id="slideBar">
					<div>
						<span class="title">推荐</span>
						<ul>
							<li class="active">
								<i class='sm margin iconfont icon-found'></i>发现音乐
							</li>
							<li>
								<i class='sm margin iconfont icon-fm'></i>私人FM
							</li>
							<li>
								<i class='sm margin iconfont icon-mv'></i>MV
							</li>
							<li>
								<i class='sm margin iconfont icon-friend'></i>朋友
							</li>
						</ul>
					</div>
					<div>
						<span class="title">我的音乐</span>
						<ul>
							<li>
								<i class='sm margin iconfont icon-like'></i>我喜欢的音乐
							</li>
							<li>
								<i class='sm margin iconfont icon-download'></i>下载管理
							</li>
							<li>
								<i class='sm margin iconfont icon-cloud'></i>我的音乐云盘
							</li>
							<li>
								<i class='sm margin iconfont icon-star'></i>我的收藏
							</li>
						</ul>
					</div>
					<div class="playing-box">
						<div class="music-pic sm">
						</div>
						<div class="music-info sm">
							<strong class="music-name">暂无歌曲</strong>
							<span class="singer">未知</span>
						</div>
					</div>
				</div>
				<div id="page-container">
					<div class="page page-found active">
						<div class="box">
							<div class="pic-list">
								<ul>
									<li class="pic p5">
										<img class='picimg' />
									</li>
									<li class="pic p4">
										<img class='picimg' />
									</li>
									<li class="pic p3">
										<img class='picimg' />
									</li>
									<li class="pic p2">
										<img class='picimg' />
									</li>
									<li class="pic p1">
										<img class='picimg' />
									</li>
								</ul>
							</div>
							<div class="btn-list">
								<a class="active"></a>
								<a></a>
								<a></a>
								<a></a>
								<a></a>
							</div>
						</div>
						<div class="recommend">
							<h3>推荐歌单</h3>
							<hr>
							<div class="play-list">

							</div>
						</div>
					</div>
					<div class="page N"></div>
					<div class="page page-mv">
						<div class="tab">
							<a class="active">MV精选</a>
							<a>LI出品</a>
							<a>全部MV</a>
						</div>
						<hr>
						<div class="mv-list">

						</div>
					</div>
					<div class="page N"></div>
					<div class="page page-favorite">
						<div class="favorite-info">
							<div class="favorite-pic"></div>
							<div class="favorite-data">
								<h2>我喜欢的音乐</h2>
								<p>夜风之雨v</p>
								<p>2016-05-23创建</p>
								<button type="button">
									<i class="iconfont icon-play"></i>播放
								</button>
							</div>
						</div>
						<div class="favorite-list">
							<table rules='none'>
								<tr>
									<th class="th-id">id</th>
									<th class="th-song">歌曲</th>
									<th class="th-singer">歌手</th>
									<th class="th-album">专辑</th>
								</tr>
							</table>
						</div>
					</div>
					<div class="page N"></div>
					<div class="page N"></div>
					<div class="page N"></div>
					<div class="page N"></div>
					<div class="page page-loading">
						<div>
							<i class="lg iconfont icon-loading"></i>
						</div>
					</div>
					<div class="page page-search">
						<div serach-count>
							<p>共找到30条结果</p>
						</div>
						<div class="song-list">
							<table rules='none'>
								<tr>
									<th class="th-id">id</th>
									<th class="th-song">歌曲</th>
									<th class="th-singer">歌手</th>
									<th class="th-album">专辑</th>
								</tr>
							</table>
						</div>
					</div>
					<div class="page page-userInfo">
						<div class="user-container">
							<div class="user-bg"></div>
							<div class="user-avatar lg"></div>
							<div class="user-info">
								<ul>
									<li><i class='sm margin iconfont icon-user'></i>ID：<span class="user-id"></span></li>
									<li><i class='sm margin iconfont icon-nickname'></i>昵称：<span contenteditable="true" class="user-nickname"></span></li>
									<li><i class='sm margin iconfont icon-sign'></i>签名：<span contenteditable="true" class="user-sign"></span></li>
								</ul>
								<button class="save" type='button'>保存</button>
								<!-- <form>
									<div class="form-item">
										<label for="nickname">昵称</label>
										<input type='text' id="nickname" />
									</div>
									<div class="form-item">
										<label for="nickname">个性签名</label>
										<textarea id='sign'></textarea>
									</div>
								</form>	
								<div class="btn-group">
									<button class="save" type='button'>保存</button>
									<button class="cancel" type='button'>取消</button>
								</div> -->
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="footer">
				<div class="play-group">
					<i class="lg iconfont icon-prev"></i>
					<i class="lg iconfont icon-play"></i>
					<i class="lg iconfont icon-next"></i>
				</div>
				<div class="play-status">
					<span class="time l">00:00</span>
					<span class="progress">
						<span class="progress-active"></span>
						<span class="dot"></span>
					</span>
					<span class="time r">00:00</span>
				</div>
				<div class="play-volume">
					<i class="sm iconfont PM icon-loop"></i>
					<i class="sm iconfont icon-vol"></i>
					<input type="range" min="0" max="1" step="0.01" value="0.55" class="vc" />
				</div>
			</div>
			<div id="musicInterface">
				<div class="lg iconfont icon-back"></div>
				<div class="music-info lg">
					<h2 class="music-name">暂无歌曲</h2>
					<p class="singer">
						未知
					</p>
				</div>
				<div class="music-disc">
					<div class="disc">
						<div class="music-pic lg"></div>
					</div>
				</div>
				<div class="comment-list">
					<h3>听友评论 （<span class="cnum">0</span>条评论）</h3>
					<hr>
					<input type="text" class="comment-input" placeholder="发表评论">
				</div>
			</div>
			<div id="videoInterface">
				<div class="mediabox">
					<div class="lg iconfont icon-back"></div>
					<div class="videoPlayer"></div>
				</div>
			</div>
			<div id="LSmask">
				<div class='front active'>
					<div class="LSlogo">L.I.
						<i class="iconfont icon-cloud"></i>
					</div>
					<div class="tab">
						<a class="active">登录</a>
						<a>注册</a>
					</div>
					<div class="slider-bar">
						<div class="slider"></div>
					</div>
					<div class="formGroup">
						<form>
							<input type='text' class="username" placeholder="用户名/手机号/邮箱" />
							<input type='password' class="password" placeholder="密码" />
							<button class="sumbit login" type='button'>登录</button>
						</form>
						<form>
							<input type='text' class="username" placeholder="用户名/手机号/邮箱" />
							<input type='password' class="password" placeholder="密码" />
							<button class="sumbit sign" type='button'>注册</button>
						</form>
					</div>
					<span>©2017-2018 LI云音乐</span>
				</div>
				<div class='behind'>
					<p></p>
					<i class="iconfont icon-success"></i>
				</div>
			</div>
		</div>
	</div>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</body>

</html>